<template>
  <div class="menuconfiguration">
    <!--菜单配置 -->
    <div class="con">
        <div class="topbtn">
            <span>高级功能配置</span>
            <el-button type="primary" class="last-el-button" @click="addfn">新增</el-button>
        </div>
        <div class="mytable">
            <el-table id="demo" ref="table" height="100%" border  stripe :data="tableData" 
            style="width: 100%">
            <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
            <el-table-column label="序号" type="index" width="120" align="center"> </el-table-column>
            <el-table-column prop="rightname" label="名称" min-width="100" ></el-table-column>
            <el-table-column prop="webpage" label="路由" min-width="100"> </el-table-column>
            <el-table-column label="操作" width="300" align="center">
              <template #default="{row}">
                <div class="public-flex" >
                  <span @click="editfn(row)" style="color:#368ed9;cursor: pointer;">编辑</span>
                  <span @click="deleteMenu(row)" style="color:red;cursor: pointer;margin-left:12px">删除</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog width="450px" draggable  :title="caozuoType" :close-on-click-modal='false' :visible.sync="addeditflagline">
                    <div class="choicedio">
                         <div class="infoitems">
                             <div class="items itemright" style="width:100%">
                                <div class="leftname"><span>*</span> 名称：</div>
                                 <el-input v-model="temp.rightname" placeholder="请输入名称"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items itemright" style="width:100%">
                                <div class="leftname"><span>*</span> 路由：</div>
                                 <el-input v-model="temp.webpage" placeholder="请输入路由"></el-input>
                            </div>
                         </div>
                        
                    </div>
                    <div class="el-loading-mask" v-show="diaisMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
                     </div>
                   <div slot="footer" class="dialog-footer">
                            <el-button  @click="addeditflagline = false" >取 消</el-button>
                            <el-button  class="last-el-button" @click="addpassageway" type="primary">确 定</el-button>
                    </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {


  data() {
    return {
      tableData:[

      ],
      diaisMask:false,
      caozuoType:"新增",
      addeditflagline:false,
      temp:{
        rightname:"",
        webpage:""
      }
    };
  },

  mounted() {
    // console.log("userDetailed",localStorage.getItem('userDetailed'));
    this.getList()
  },

  methods: {
    //获取列表数据
      getList() {
        var userData = JSON.parse(localStorage.getItem('userDetailed'))
        // console.log("userData",userData);
        if(userData != undefined){
            this.$api.menuApi.getAllRight(userData.userId, res => {
                this.tableData = res.menuRight
                // console.log("tableData", this.tableData);
            })
        }
      },
     addfn(){
        this.temp = {
            rightname:"",
            webpage:""
        }
        this.caozuoType = "新增"
        this.addeditflagline = true
     },
     editfn(row){
        this.nowMenu = row
        this.temp = {
            rightname:row.rightname,
            webpage:row.webpage
        }
        this.caozuoType = "修改"
        this.addeditflagline = true
     },
     addpassageway(){
        if(this.temp.rightname == ""){
              this.$message({showClose: true,message: '名称不能为空',type: 'warning'});
              return
        }
        if(this.temp.webpage == ""){
              this.$message({showClose: true,message: '路由不能为空',type: 'warning'});
              return
        }
        if(this.caozuoType == '新增'){
             this.$api.menuApi.saveMenuAdd(this.temp.rightname, "menuright", '1', this.temp.webpage, "1", "1", "0", "", "", respon => {
                this.$message({ message: "添加成功", type: 'success' });
                this.getList()
                this.addeditflagline = false
              }, respon => {
                this.$message({ message: respon, type: 'error' });
              })
        }else {
             this.$api.menuApi.saveMenu(this.nowMenu.id, this.temp.rightname,
              this.nowMenu.righttype, this.nowMenu.serialno, this.temp.webpage, this.nowMenu.parentid, "1", "1", "0", "", "", respon => {
                this.$message({ message: "修改成功", type: 'success' });
                this.getList()
                this.addeditflagline = false;
              }, respon => {
                err(respon)
                this.$message({ message: respon, type: 'error' });
              })
        }
     },
     //删除
      deleteMenu(nowMenu) {
        this.$confirm(`是否删除 ${nowMenu.rightname}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var id = nowMenu.id //当前选中web菜单的id
          //删除接口
          this.$api.menuApi.deleteMenuById(id, respon => {
            // this.$dialogMethod.showMessage(respon)
            this.$message({ message: '删除成功', type: 'success' });
            // this.nowMenu = undefined
            this.getList()
          }, respon => {
            this.$message({ message: '删除失败', type: 'error' });
          })
        }).catch(() => {
          // ...
        });

      },
  },
};
</script>
<style lang="scss" scoped>
    .menuconfiguration {
         width: 100%;
         height: 100%;
         .con {
             width: 100%;
             height: 100%;
             background-color: #fff;
             padding: 12px;
             box-sizing: border-box;
             .topbtn {
                 width: 100%;
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 border-bottom: 1px solid #CCC;
                 padding-bottom: 6px;
             }
             .mytable {
                 width: 100%;
                 height: calc(100% - 56px);
                 margin-top: 10px;
             }
         }
    }
</style>